<template>
  <div class="sub">
    <el-tabs v-model="subActiveName" @tab-click="handleClick">
      <el-tab-pane v-for="(item, index) in subTabsList" :key="index" :label="item.name" :name="String(item.component)" :data-id="item.component" lazy>
        <component :is="item.component" :project-id="projectId" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>

import ConstructionPermit from '@/views/project/info/sub/subNavTabsPages/constructionPermit.vue'
import QualitySupervisions from '@/views/project/info/sub/subNavTabsPages/qualitySupervisions.vue'
import SafeSupervisions from '@/views/project/info/sub/subNavTabsPages/safeSupervisions.vue'
import SceneSecurityInfo from '@/views/project/info/sub/subNavTabsPages/sceneSecurityInfo.vue'
import SceneManageInfo from '@/views/project/info/sub/subNavTabsPages/sceneManageInfo.vue'
import SceneSpecialInfo from '@/views/project/info/sub/subNavTabsPages/sceneSpecialInfo.vue'
import SceneMachineInfo from '@/views/project/info/sub/subNavTabsPages/sceneMachineInfo.vue'
import SceneCheckInfo from '@/views/project/info/sub/subNavTabsPages/sceneCheckInfo.vue'
import SupervisionInfo from '@/views/project/info/sub/subNavTabsPages/supervisionInfo.vue'

export default {
  name: 'BasicInfos',
  components: {
    ConstructionPermit,
    QualitySupervisions,
    SafeSupervisions,
    SceneSecurityInfo,
    SceneManageInfo,
    SceneSpecialInfo,
    SceneMachineInfo,
    SceneCheckInfo,
    SupervisionInfo
  },
  props: {
    info: { type: Object, default: null },
    projectId: { type: String, default: '' }
  },
  data() {
    return {
      subTabsList: [
        { component: 'ConstructionPermit', name: '施工许可信息' },
        { component: 'QualitySupervisions', name: '质量监督信息' },
        { component: 'SafeSupervisions', name: '安全监督信息' },
        { component: 'SceneSecurityInfo', name: '施工现场安全专业人员信息' },
        { component: 'SceneManageInfo', name: '施工现场管理人员信息' },
        { component: 'SceneSpecialInfo', name: '施工现场特种作业人员信息' },
        { component: 'SceneMachineInfo', name: '施工现场主要机械设备信息' },
        { component: 'SceneCheckInfo', name: '施工现场检查信息' },
        { component: 'SupervisionInfo', name: '现场工程监理人员信息' }
      ],
      subActiveName: 'ConstructionPermit'
    }
  },
  created() {
  },
  methods: {
    handleClick(tab) {
      this.activeNames = tab.name
    }
  }
}
</script>

<style scoped>
.sub {
  padding: 20px;
}
.content{
  margin-top: 20px;
}
.sub ::v-deep .el-tabs__item{
  border: 1px solid #E8E8E8;
  border-radius: 5px;
  margin-right: 10px;
  padding: 0 20px !important;
}
.sub ::v-deep .el-tabs__nav-wrap::after{
  height: 0;
}
.sub ::v-deep .el-tabs__active-bar{
  height: 0;
}
.sub ::v-deep .el-tabs__item.is-active{
  border-top: 1px solid #409eff!important;
  border: 1px solid #409eff;
  border-radius: 5px;
  color: #409eff;
  padding: 0 20px!important;
}
.sub ::v-deep .el-tabs__item{
  font-size: 15px;
  color: #5A5A5A;

}
.sub ::v-deep .el-tabs__item:hover{
  color: #409eff;
}
</style>
